<template>
    <div id='listpanl'>
      <van-cell-group class='listitem'>
        <van-field v-model="queryInfo.parkName" readonly  label="停车场名称" />
        <van-field v-model="queryInfo.parkNo" readonly  label="停车场编号"  v-if='NPFLG' />
        <van-field v-model="parkingNo" readonly  label="泊位号" />
        <van-field v-model="FeeTips" readonly  label="收费标准" />
      </van-cell-group>
      <van-cell-group class='listitem' style="margin-top: 20px">
        <van-field v-model="reserveTime" required readonly label="预约时间" @click='selectTime'/>
        <van-field  label="车牌号" required disabled v-model='reserveNo'   clearable  @click.native='showCarPicker' />
        <van-field  v-model='reserveType' required readonly label="牌照类型"  @click='selectType' />
        <van-field v-model="reserveTel"  required  label="联系方式" />
      </van-cell-group>
      <div style='position: fixed;bottom: 0px;width: 100%;' @click='ToPay'>
        <van-button size="large" style="background-image: linear-gradient(-90deg, #508DFF 0%, #30AFF7 100%);color: white">预约</van-button>
      </div>
       <!--牌照弹层-->
      <van-popup v-model="selectCarType"  position="bottom" :overlay="false">
        <van-picker show-toolbar title="牌照类型" :columns="plateColorList" @cancel="SelectColorCancel" @confirm="SelecetColorConfirm"/>
      </van-popup>
      <!--时间弹层-->
      <van-popup v-model="selectCarTime" position="bottom" :overlay="false">
        <van-picker show-toolbar title="预约时间段" :columns="reserveTimeList" @cancel="SelectTimeCancel" @confirm="SelecetTimeConfirm"/>
      </van-popup>
      <!--键盘弹层-->
      <van-popup v-model="Carshow" position="bottom" :overlay="false">
        <van-picker show-toolbar title="选择要预约的车辆" :columns="bindCarList" @cancel="SelectCarCancel" @confirm="SelecetCarConfirm"/>
      </van-popup>
    </div>
</template>

<script>
  import  { canReserve,ReservePay,getJNPayOpenid,findWxUserInfo,findCommonCars } from '../../api/nearPark/nearPark'
  import { Toast } from 'vant';
  import { Dialog } from 'vant';
  export default {
    name: 'reservePark',
      data() {
        return {
          NPFLG: false,
          selectCarType: false,
          selectCarTime: false,
          FtZQcode:'',
          radio: '',
          bindCarList: [],
          reserveTimeList:[
            '现在至一小时后','现在至两小时后','现在至三小时后','现在至四小时后'
          ], //预约时间段
          plateColorList:['白色牌照','黄色牌照','蓝色牌照','绿色牌照','黑色牌照','其他牌照'], //牌照类型
          timeradio: '',
          ReParkInfo: {
            parkName: '',
            parkAdr: '',
            CarNo: '',
            satrTime: '',
          },
          queryInfo: {
            parkNo:'',
            parkName:''
          },
          FeeTips: '按市政标准收费',
          parkingNo: '---',
          reserveTime: '',
          reserveNo: '',
          reserveType: '',
          reserveTel: '',
          newTime: '',
          JNPayOpenID:'',
          ZQRePayOpenId:'',
          active:'',
          Carshow: false,
        };
      },
      created(){
      },
      mounted() {
        // ----获取code---
        var  _JNcode = this.$route.query.code //济南的code
        //---去参数
        var _VALurl=this.$route.query.parkInfo  //获取参数
        if(_VALurl!=undefined){ //存在参数
          var urlstr=decodeURI(_VALurl)    //decode解码
          var _urlAry=JSON.parse(urlstr)   //转对象
          this.queryInfo.parkNo=_urlAry.parkNO
          this.queryInfo.parkName=_urlAry.parkName
          this.FtZQcode=_urlAry.getZQCode
          //存本地
          window.localStorage.setItem('parkNo',_urlAry.parkNO)
          window.localStorage.setItem('parkName',_urlAry.parkName)
        }else{  //不存在
          this.queryInfo.parkNo=window.localStorage.getItem('parkNo')
          this.queryInfo.parkName=window.localStorage.getItem('parkName')
        }

        if(_urlAry.getZQCode!=undefined){  //章丘code存在
          //--获取用户信息
          findWxUserInfo( this.FtZQcode).then((res)=>{
            this.reserveTel=res.phoneNo  //s手机号
            var _ZQopenID=res.openid  //章丘openid
            this.ZQRePayOpenId=res.openid
            window.localStorage.setItem('ZQOpenID',res.openid)
            //查询绑定的车辆信息
            findCommonCars(_ZQopenID).then((res)=>{
              // this.bindCarList=res;  //绑定车辆列表
              for(var i in res){
                this.bindCarList.push(res[i].plateNo)
                if(res[i].isDefault==1){   //为默认车
                  this.reserveNo=res[i].plateNo
                  this.radio = res[i].plateColor // 车牌颜色代码
                  switch (res[i].plateColor){ // 车牌颜色
                    case 0:
                      this.reserveType='白色牌照';
                      break;
                    case 1:
                      this.reserveType='黄色牌照';
                      break;
                    case 2:
                      this.reserveType='蓝色牌照';
                      break;
                    case 4:
                      this.reserveType='绿色牌照';
                      break;
                    case 3:
                      this.reserveType='黑色牌照';
                      break;
                    case 9:
                      this.reserveType='其他牌照';
                      break;
                  }
                }
              }
            },(err)=>{
              // 未获取车辆列表
            })
          },(err)=>{
              alert('获取用户信息失败')
          })
          //取济南openid 用于支付
          getJNPayOpenid(_JNcode).then((res)=>{
            this.JNPayOpenID=res
            //  ---写入缓存
            window.localStorage.setItem('JNPayOpenID',res)
          },(err)=>{
            // 没获取openid 取本地数据
            this.JNPayOpenID=window.localStorage.getItem('JNPayOpenID')
          })
        }else{  //重进页面 code 丢失时
          // 没获取openid 取本地数据
          this.JNPayOpenID=window.localStorage.getItem('JNPayOpenID')
          //查询绑定的车辆信息
          var _ZQopenID=window.localStorage.getItem('ZQOpenID')
          findCommonCars(_ZQopenID).then((res)=>{
            for(var i in res){
              this.bindCarList.push(res[i].plateNo)  //绑定车辆列表
              if(res[i].isDefault==1){   //为默认车
                this.reserveNo=res[i].plateNo
                this.radio = res[i].plateColor // 车牌颜色代码
                switch (res[i].plateColor){ // 车牌颜色
                  case 0:
                    this.reserveType='白色牌照';
                    break;
                  case 1:
                    this.reserveType='黄色牌照';
                    break;
                  case 2:
                    this.reserveType='蓝色牌照';
                    break;
                  case 4:
                    this.reserveType='绿色牌照';
                    break;
                  case 3:
                    this.reserveType='黑色牌照';
                    break;
                  case 9:
                    this.reserveType='其他牌照';
                    break;
                }
              }
            }
          },(err)=>{
            // 未获取车辆列表
          })
        }
      },
      methods: {
          // ---判断是否能预约   carNo, carType, parkno, placeId
        canServe(carNo, carType, parkno, placeId){
            canReserve(carNo, carType, parkno, placeId).then((res)=> {
              if(res){
                //  可预约  预下单
                this.ReToPay()
              }else{
                // 不可预约
                Dialog.alert({
                  title: '不能预约啦',
                  message: '<p style="text-align:center">重新选择车场吧</p>',
                }).then(() => {
                  this.$router.replace('../nearPark')
                });

              }
            }, (err)=> {
              Dialog.alert({
                title: '预约失败',
                message: '<p style="text-align:center">请重试</p>'
              }).then(
              //   () => {
              //   this.$router.push('../nearPark')
              // }
              );
            });
        },
        // --车牌类型
        selectType() {
            this.selectCarType = true
        },
        // --时间
        selectTime() {
          this.selectCarTime = true
        },
        //--选车
        showCarPicker(){
          this.Carshow=true
        },
        //----选车picker
        SelecetCarConfirm(value, index) {
          this.reserveNo=value    //选中的车牌号
          this.radio =this.bindCarList[index].plateColor //  选中的车牌颜色
          switch (this.bindCarList[index].plateColor){
            case 0:
              this.reserveType='白色牌照';
              break;
            case 1:
              this.reserveType='黄色牌照';
              break;
            case 2:
              this.reserveType='蓝色牌照';
              break;
            case 4:
              this.reserveType='绿色牌照';
              break;
            case 3:
              this.reserveType='黑色牌照';
              break;
            case 9:
              this.reserveType='其他牌照';
              break;
          }
          this.Carshow =false
        },
        SelectCarCancel() {
          this.Carshow=false// 取消 关闭picker
        },
        //----时间picker
        SelecetTimeConfirm(value, index) {
          this.reserveTime=value    //选中的时间段
          this.timeradio =index+1 //  选中的时间代码
          this.selectCarTime=false //关闭
          this.TimeComputed(index+1 )
        },
        SelectTimeCancel() {
          this.selectCarTime=false  //关闭// 取消 关闭picker
        },
        //----牌照picker
        SelecetColorConfirm(value, index) {
          this.reserveType=value    //选中的牌照
          switch (value){
            case '白色牌照':
              this.radio=0;
              break;
            case '黄色牌照':
              this.radio=1;
              break;
            case '蓝色牌照':
              this.radio=2;
              break;
            case '绿色牌照':
              this.radio=4;
              break;
            case '黑色牌照':
              this.radio=3;
              break;
            case '其他牌照':
              this.radio=9;
              break;
          }
          this.selectCarType=false //关闭
        },
        SelectColorCancel() {
          this.selectCarType=false  //关闭// 取消 关闭picker
        },

        // ---车牌验证
        CarNoCheck(vehicleNumber) {
          let reg = /([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1})/
          if (reg.test(vehicleNumber)) {
            return true;
          } else {
            return false;
          }
        },
        // ----手机号验证
        TelNo(str) {
          var mobile = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
          if(!mobile.test(str)) {
            Toast.fail('手机号填写不正确')
            return false
          }else{
            return true
          }
        },
        // --时间计算
        TimeComputed(addT) {
            let _now = new Date()
            let _times =_now.getTime()+addT*60*60*1000  // 毫秒
            let _timesAD = new Date(_times)
            let _min=_timesAD.getMinutes()
            if(_min<10){
                var _mint='0'+_min
            }else{
              var _mint=_min
            }
            let _T= _timesAD.getFullYear()+'-'+(_timesAD.getMonth()+1)+'-'+_timesAD.getDate()+'  '+_timesAD.getHours()+':'+_mint
            this.newTime = _T
        },
        //  下单随机数
        RandomWord(){
          var  _randT = new Date().getTime()
          return _randT
        },
        // ---预下单
        ReToPay(){
          var _uuid = this.RandomWord()
          // --预约下单  carno, openid, parkno, timehas, cartype, phone, placeid, parkname, uuid,openid
          ReservePay(this.reserveNo,this.JNPayOpenID,this.queryInfo.parkNo,this.timeradio,this.radio,this.reserveTel,'taihua',this.queryInfo.parkName,_uuid,this.ZQRePayOpenId).then(
            (res) => {
              if (res.code == 0) {  //可下单
                console.log(res)
                // -- 参数
                this.ReParkInfo.parkName = this.queryInfo.parkName;
                this.ReParkInfo.parkAdr = '';
                this.ReParkInfo.CarNo = this.reserveNo;
                this.ReParkInfo.satrTime = this.newTime;
                // --Z追加 result
                for (var key in res.result) {
                  this.ReParkInfo[key] = res.result[key]
                }
                // ---页面跳转
                //  跳转
                this.$router.replace({
                  name:'reserverPay',
                  params:{
                    rePayinfo:this.ReParkInfo
                  }
                })
              } else {
                Toast.fail('预下单失败，请重试')
              }
            }, (err) => {
              console.log(err)
              Toast.fail('网络错误，请重试')
            })
        },
        ToPay() {
          if (this.reserveTime =='' || this.reserveNo==''|| this.reserveType==''||this.reserveTel==''){
              Toast.fail('请填写完整')
              return
          }else {
            // ---车牌验证
            if(!this.CarNoCheck(this.reserveNo)){
              Toast.fail('请核对车牌号')
              return false
            }else if(this.TelNo(this.reserveTel)){ // --手机号
              // -预约判断
              this.canServe(this.reserveNo, this.radio, this.queryInfo.parkNo, 'taihua');
            }
          }
        }
    }
  }
</script>

<style scoped>
  #listpanl{
    width: 100%;
    height: 99vh;
    background: #F7F6F6;
  }
  .listitem{
    margin: 10px 0;
    font-size: 14px;
  }
  .cellitem{
    height: 48px;
  }
  .radioitem{
    height: 40px;
    line-height: 40px;
  }
  .bound-veh-background {
    position: relative;
    top: 0px;
    left: 0px;
    background: #f7f6f6;
    min-height: 100vh;
  }

  .bound-veh-tite-text1 {
    font-size: 23px;
    color:#FFFFFF;
    margin-bottom: 13px;
  }
  .bound-veh-tite-text2 {
    font-size: 16px;
    color: #FFFFFF;
    line-height: 21px;
  }
  .bound-veh-field {
    border: 1px solid #30AFF7;
    border-radius: 8px;
  }

  .bound-veh-field-slottext {
    color: #3DA6FF;
    font-size: 20px;
  }

  .bound-veh-field-picker{
    display: inline-block;
    width: 16%;
    height: 100%;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
  }
  .bound-veh-field-input{
    display: inline-block;
    width: 83%;
    height: 100%;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
  }

  @media screen and (max-width: 487px) {
    .bound-veh-field-picker{
      width: 16%;
    }
    .bound-veh-field-input{
      width: 80%;
    }
  }
  @media screen and (max-width: 305px) {
    .bound-veh-field-picker{
      width: 18%;
    }
    .bound-veh-field-input{
      width: 77%;
    }
  }
  @media screen and (max-width: 275px) {
    .bound-veh-field-picker{
      width: 21%;
    }
    .bound-veh-field-input{
      width: 73%;
    }
  }

  .bound-veh-list {
    color: #3DA6FF;
    text-align: center;
    margin: 20px;
  }

  .bound-veh-keyboardcell {
    cursor: pointer;
    border-radius: 5px;
    vertical-align: middle;
    display: table-cell;
    border: 1px solid #dfdfdf;
    height: 35px;
    width: 1%;
    color: #30AFF7;
  }

  .bound-veh-keyboardbutton {
    background: #30AFF7;
    color: #FFFFFF;
    font-size: 20px;
    height: 22px;
    text-align: center;
    padding: 5px;
    width: 100%;
    display: inline-block;
  }

  .bound-veh-cellCenter{
    text-align: center;
    display: inline-block;
  }

  .bound-veh-keyBoard-num{
    text-align: center;
    display: table;
    width: 100%;
  }

  .bound-veh-keyBoard-numkey{
    cursor: pointer;
    border-radius: 5px;
    vertical-align: middle;
    display: inline-block;
    border: 1px solid #dfdfdf;
    line-height: 35px;
    color: #30AFF7;
    float: left;
  }

  .bound-veh-keyBoard-numkeywidth{
    width: 9%;
    margin: 0.4%
  }




  @media screen and (max-width: 1035px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 9%;
      margin: 0.36%
    }
  }

  @media screen and (max-width: 725px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 9%;
      margin: 0.33%
    }
  }
  @media screen and (max-width: 603px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 9%;
      margin: 0.3%
    }
  }

  @media screen and (max-width: 506px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 9%;
      margin: 0.27%
    }
  }

  @media screen and (max-width: 443px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 8.9%;
      margin: 0.25%
    }
  }

  @media screen and (max-width: 340px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 8.8%;
      margin: 0.22%
    }
  }

  @media screen and (max-width: 267px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 8.6%;
      margin: 0.2%
    }
  }

  @media screen and (max-width: 203px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 8.3%;
      margin: 0.15%
    }
  }

  @media screen and (max-width: 144px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 8%;
      margin: 0.1%
    }
  }

  @media screen and (max-width: 125px) {
    .bound-veh-keyBoard-numkeywidth{
      width: 8%;
      margin: 0.05%
    }
  }
  .delete-button{
    font-size: 40px;
    font-weight: bold;
    background: #30AFF7;
    color: red;
  }
  .bound-veh-keyboardactive{
    background-color: #30AFF7;
    color: #ffffff;
  }
</style>
